<script setup>
import { ref, onMounted, } from 'vue'
import { useRoute } from 'vue-router';
import { getDetailArticleAPI } from '../../apis/apis'
import { useAnchorsStore } from '../../stores/anchorsStore';

// 自定义锚点
const preview = ref(null);
// 路由获取文章id
const route = useRoute()
// 请求的文章
const articleInfo = ref({})
// 骨架屏
const loading = ref(true)
// 代码复制成功
const handleCopyCodeSuccess = () => {
  ElNotification({
    title: 'Success 复制成功',
    duration: 2000,
    message: '',
    type: 'success',
  })
}
// 根据id获取文章信息
const getArticle = async () => {
  const res = await getDetailArticleAPI(route.params.id)
  articleInfo.value = res.data
}

onMounted(async () => {
  await getArticle()
  setTimeout(() => {
    loading.value = false
    setTimeout(() => {
      // 将markdown对象都放入store中
      const anchorsStore = useAnchorsStore()
      anchorsStore.setPreview(preview.value)
    }, 100);
  }, 100);
})
</script>

<template>
  <el-skeleton
    animated
    :loading="loading"
    class="z-0"
  >
    <template #template>
      <div class="min-w-max min-h-screen bg-white shadow-md">
        <div class="bg-white flex flex-col items-center py-10 space-y-2">
          <div class="text-gray-600 text-3xl font-medium px-5 w-1/3">
            <el-skeleton-item
              variant="h1"
              style="height: 2rem;"
            />
          </div>
          <div class="text-sm text-gray-600  opacity-90 w-1/2">
            <el-skeleton-item
              variant="h1"
              style="height: 1.5rem;"
            />
          </div>
          <div class="flex text-sm text-gray-600 opacity-90 w-2/3 space-x-2">
            <el-skeleton-item
              variant="h1"
              style="height: 1.5rem;"
            />
          </div>
        </div>
        <div class="bg-white  w-full h-auto px-10 font-serif font-bold  text-xl">
          <div class="py-1">
            <el-skeleton-item
              variant="button"
              style="height: 2rem;"
            />
          </div>
          <div class="px-5 underline decoration-dotted tracking-wide">
            <el-skeleton-item
              variant="h1"
              style="height: 2rem;"
            />
            <el-skeleton-item
              variant="h1"
              style="height: 2rem;"
            />
          </div>
        </div>
        <div
          v-for="i in 3 "
          class="px-10 pt-5 w-full flex flex-col space-y-3"
        >
          <div class="w-full">
            <el-skeleton-item
              variant="button"
              style="height: 2rem; width: 10rem;"
            />
          </div>
          <div class="w-full">
            <el-skeleton-item
              variant="h1"
              style="height: 2rem;"
            />
          </div>
          <div class="w-full">
            <el-skeleton-item
              variant="h1"
              style="height: 2rem;"
            />
          </div>
          <div class="w-full">
            <el-skeleton-item
              variant="h1"
              style="height: 2rem;"
            />
          </div>
          <div class="w-full">
            <el-skeleton-item
              variant="h1"
              style="height: 2rem;"
            />
          </div>
        </div>
      </div>
    </template>
    <template #default>
      <div class="min-w-max min-h-screen shadow-md">
        <div class="bg-white flex flex-col items-center py-10 space-y-2">
          <div class="text-gray-600 text-3xl font-medium px-5 ">{{ articleInfo.title }}</div>
          <div class="text-sm text-gray-600 opacity-90">
            <div class="flex space-x-3">
              <div class="flex items-center">
                <svg
                  t="1707965116203"
                  class="w-3.5 h-3.5 mr-1"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M0.0005 941.61208A82.38792 82.38792 0 0 0 82.38842 1024h858.979161a82.38792 82.38792 0 0 0 82.387919-82.38792V363.433645H0.0005z m694.691322-429.48958h73.124928a36.562964 36.562964 0 0 1 0 73.124928h-73.124928a36.562964 36.562964 0 0 1 0-73.124928z m-219.376786 0h73.125928a36.562964 36.562964 0 0 1 0 73.124928h-73.125928a36.562964 36.562964 0 0 1 0-73.124928z m0 221.813783h73.125928a36.562964 36.562964 0 0 1 0 73.124929h-73.125928a36.562964 36.562964 0 0 1 0-73.124929zM255.94025 512.1225h73.125929a36.562964 36.562964 0 0 1 0 73.124928h-73.125929a36.562964 36.562964 0 0 1 0-73.124928z m0 221.813783h73.125929a36.562964 36.562964 0 0 1 0 73.124929h-73.125929a36.562964 36.562964 0 0 1 0-73.124929z m767.81625-578.178435a82.38792 82.38792 0 0 0-82.387919-82.38792H804.379714V41.19496a40.94996 40.94996 0 0 0-82.387919 0v32.174968H301.764205V41.19496a40.94996 40.94996 0 0 0-82.387919 0v32.174968H82.38842A82.38792 82.38792 0 0 0 0.0005 155.757848V283.970723h1023.755z"
                    fill="#515151"
                  ></path>
                </svg>
                发表于：<div class="border-b border-black border-dashed`2113">{{ articleInfo.createTime }}</div>
              </div>
              <div class="flex items-center">
                <svg
                  t="1707965362473"
                  class="w-4 h-4 mr-1"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M855.04 385.024q19.456 2.048 38.912 10.24t33.792 23.04 21.504 37.376 2.048 54.272q-2.048 8.192-8.192 40.448t-14.336 74.24-18.432 86.528-19.456 76.288q-5.12 18.432-14.848 37.888t-25.088 35.328-36.864 26.112-51.2 10.24l-567.296 0q-21.504 0-44.544-9.216t-42.496-26.112-31.744-40.96-12.288-53.76l0-439.296q0-62.464 33.792-97.792t95.232-35.328l503.808 0q22.528 0 46.592 8.704t43.52 24.064 31.744 35.84 12.288 44.032l0 11.264-53.248 0q-40.96 0-95.744-0.512t-116.736-0.512-115.712-0.512-92.672-0.512l-47.104 0q-26.624 0-41.472 16.896t-23.04 44.544q-8.192 29.696-18.432 62.976t-18.432 61.952q-10.24 33.792-20.48 65.536-2.048 8.192-2.048 13.312 0 17.408 11.776 29.184t29.184 11.776q31.744 0 43.008-39.936l54.272-198.656q133.12 1.024 243.712 1.024l286.72 0z"
                    fill="#515151"
                  ></path>
                </svg>
                分类于：<div class="border-b border-black border-dashed"> {{ articleInfo.categoryName }}
                </div>
              </div>
            </div>
          </div>
          <div class="flex text-sm text-gray-600 opacity-90 space-x-2">
            <div class="flex pr-1 items-center">
              <svg
                t="1707965461197"
                class="w-3.5 h-3.5 mr-1"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M874.660373 301.651825L597.328427 21.333227a76.799616 76.799616 0 0 0-14.506594-11.519943l-4.266646-2.133322h-2.986652A71.679642 71.679642 0 0 0 546.128683 0H200.957075A72.959635 72.959635 0 0 0 127.99744 72.106306v879.782268A72.959635 72.959635 0 0 0 200.957075 1023.99488h622.930219A71.252977 71.252977 0 0 0 895.9936 951.888574V352.424905a71.679642 71.679642 0 0 0-21.333227-50.77308zM597.328427 822.182556H505.168887l-3.83998-127.99936v-69.546319c-7.679962 22.186556-15.359923 46.506434-23.893214 69.546319l-50.77308 127.99936H338.769719v-298.665174h71.252978l-5.119975 135.679322-4.69331 94.292862c11.093278-31.573175 22.61322-63.573015 34.133163-94.292862l56.319718-135.679322h59.733035l7.253297 135.679322v94.292862c9.38662-32.426505 18.773239-63.573015 27.733195-94.292862l42.666453-135.679322h68.266325z m-12.373272-511.99744V110.506114l200.958995 201.812324z"
                  fill="#515151"
                ></path>
              </svg>
              字数： <div class="pr-2 border-r-2 border-gray-300">{{ articleInfo.count }}</div>
            </div>
            <div class="flex pr-1 items-center">
              <svg
                t="1707972383929"
                class="w-3.5 h-3.5 mr-1"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M512 1024C229.248 1024 0 794.752 0 512S229.248 0 512 0s512 229.248 512 512-229.248 512-512 512z m42.666667-486.869333V298.538667C554.666667 275.328 535.552 256 512 256c-23.722667 0-42.666667 19.029333-42.666667 42.538667v256.256a41.984 41.984 0 0 0 12.202667 29.866666l121.258667 121.258667a42.368 42.368 0 0 0 60.032-0.298667 42.666667 42.666667 0 0 0 0.298666-60.032L554.666667 537.130667z"
                  fill="#515151"
                ></path>
              </svg>
              阅读：≈&nbsp<div class="pr-2 border-r-2 border-gray-300"> {{ Math.ceil(articleInfo.count / 700) }} 分钟
              </div>
            </div>
            <div class="flex pr-1 items-center">
              <svg
                t="1707972441145"
                class="w-3.5 h-3.5 mr-1"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M1018.738 509.156c4.266 12.8 4.266 21.333 0 34.133 0 0-4.267 12.8-8.534 17.067-4.266 12.8-12.8 25.6-21.333 42.666-21.333 34.134-51.2 76.8-93.867 123.734-81.066 89.6-209.066 183.466-384 183.466s-302.933-93.866-384-183.466c-42.666-46.934-72.533-89.6-93.866-123.734l-21.334-42.666c-4.266-4.267-8.533-17.067-8.533-17.067-4.267-8.533-4.267-21.333 0-34.133 0 0 4.267-12.8 8.533-17.067 4.267-12.8 12.8-25.6 21.334-42.667 21.333-34.133 51.2-76.8 93.866-123.733 81.067-89.6 209.067-183.467 384-183.467s302.934 93.867 384 183.467c42.667 46.933 72.534 89.6 93.867 123.733l21.333 42.667c4.267 4.267 8.534 17.067 8.534 17.067zM511.004 372.622c76.8 0 145.067 68.267 145.067 153.6 0 85.334-68.267 153.6-145.067 153.6-76.8 0-145.066-68.266-145.066-153.6 0-85.333 68.266-153.6 145.066-153.6z m-230.4 153.6c0 128 102.4 238.934 230.4 238.934s230.4-110.934 230.4-238.934-102.4-238.933-230.4-238.933-230.4 110.933-230.4 238.933z"
                  fill="#515151"
                ></path>
              </svg>
              浏览：
              <div class="pr-2 border-r-2 border-gray-300"> {{ articleInfo.views }}
              </div>
            </div>
            <div class="flex pr-1 items-center">
              <svg
                t="1709878494547"
                class="w-3.5 h-3.5 mr-1"
                viewBox="0 0 1024 1024"
                version="1.1"
              >
                <path
                  d="M931.479305 1023.72653a44.607686 44.607686 0 0 1-26.473404-8.47149L511.611119 730.930682 118.216336 1015.122673a44.740053 44.740053 0 0 1-46.857924 4.103378A45.137154 45.137154 0 0 1 47.135247 979.515945V45.004787A45.004787 45.004787 0 0 1 92.140034 0h839.471638a45.004787 45.004787 0 0 1 45.004787 45.004787v933.716956a45.269521 45.269521 0 0 1-45.137154 45.004787z"
                  fill="#4D4D4D"
                  p-id="5117"
                ></path>
                <path
                  d="M277.850962 223.83263a38.783537 38.783537 0 0 0 38.783537 38.65117h390.482708a38.783537 38.783537 0 0 0 0-77.434707h-390.482708a38.783537 38.783537 0 0 0-38.783537 38.783537zM277.850962 472.55026a38.783537 38.783537 0 0 0 38.783537 38.783537h390.482708a38.783537 38.783537 0 0 0 0-77.434707h-390.482708a38.783537 38.783537 0 0 0-38.783537 38.65117z"
                  fill="#515151"
                  p-id="5118"
                ></path>
              </svg>
              标签: &nbsp;<div
                v-for="(item, index) in articleInfo.tagList"
                :key="index"
              >
                {{ item.name }}
              </div>
              <div class="pr-2 border-r-2 border-gray-300">
              </div>
            </div>
          </div>
        </div>
        <div class="bg-white  w-full h-auto px-10 font-serif font-bold  text-xl">
          <div class="py-1">
            摘要:
          </div>
          <div class="pl-5 underline decoration-dotted tracking-wide min-w-min">
            {{ articleInfo.simple }}
          </div>
        </div>
        <v-md-editor
          v-if="articleInfo"
          @copy-code-success="handleCopyCodeSuccess()"
          mode="preview"
          v-model="articleInfo.content"
          ref="preview"
        >
        </v-md-editor>
      </div>
    </template>
  </el-skeleton>

</template>

<style
  scoped
  lang='scss'
></style>../apis/apis../stores/anchorsStore../../apis/apis../../stores/anchorsStore